<div class="slide-layout-title">
	<h1>Slides</h1>
	<h2>Presentations with HTML</h2>
</div>
<hr>
<div>
	<h1>Why?</h1>
	<p>I got fed up with using Keynote and Powerpoint to create and give presentations.  I'm a web developer for pete's sake, can't I do it in HTML?</p>
</div>
<hr>
<div>
	<h1>Yes</h1>
	<p>So, I made a simple presentation framework for the web.  You're looking at it.</p>
</div>
<hr>
<div>
	<h1>Simple</h1>
	<p>You just make slides in plain old HTML, and the framework will present them for you.  You can create themes and layouts with CSS.</p>
</div>
<hr>
<div>
	<h1>Examples</h1>
	<p>The next few slides show some examples of very simple layouts you might expect to see in a slide presentation.</p>
</div>
<hr>
<div class="slide-layout-title">
	<h1>Just a Title</h1>
</div>
<hr>
<div class="slide-layout-title">
	<h1>Title</h1>
	<h2>With Subtitle</h2>
</div>
<hr>
<div>
	<h1>Title</h1>
	<h2>Subtitle</h2>
	<p>This is a slide with title, subtitle, and some paragraph text. This slide uses a different layout that shifts everything upward to account for the paragraph text.</p>
</div>
<hr>
<div>
	<h1>Title</h1>
	<h2>Subtitle and Bullets</h2>
	<ul>
		<li>Titles, and paragraph text are just HTML elements</li>
		<ul>
			<li>e.g. <code>h1</code>, <code>h2</code>, <code>p</code></li>
		</ul>
		<li>Bullets, of course</li>
		<ul>
			<li>nest,</li>
			<ul>
				<li>as you'd expect</li>
			</ul>
		</ul>
	</ul>
</div>
<hr>
<div>
	<h1>Links</h1>
	<p>Since it's HTML, linking is easy, and means you don't have to jump out of Powerpoint or Keynote to view the link.  The back button works, too ... <a href="http://google.com/">try it</a></p>
</div>
<hr>
<div>
	<h1>More Links</h1>
	<p>You can link to other slides, too, and the back button will still work like you think it should.  <a href="#11">Try it</a>.</p>
</div>
<hr>
<div>
	<h1>Layouts</h1>
	<h2>Just use CSS</h2>
	<ul>
		<li>Layouts are just CSS classes</li>
		<ul>
			<li>e.g. <code>slide-layout-title</code></li>
		</ul>
		<li>There are a few built-in, as you've seen</li>
		<li>You can define your own</li>
	</ul>
</div>
<hr>
<div>
	<h1>Themes</h1>
	<h2>You guessed it, CSS</h2>
	<ul>
		<li>Themes are also CSS classes</li>
		<li>You're looking at the 'gray' theme right now</li>
		<li>You can, of course, define your own</li>
	</ul>
</div>
<hr>
<div>
	<h1>Transitions</h1>
	<h2>CSS again!</h2>
	<ul>
		<li>Slide transitions are defined using CSS3</li>
		<li>This presentation uses the 'fade' transition</li>
		<li>Can be integrated into a theme or mixed-and-matched</li>
		<li>And yep, you can define your own</li>
	</ul>
</div>
<hr>
<div>
	<h1>Mobile</h1>
	<h2>Landscape, portrait, touch, swipe</h2>
	<p>It has mobile viewport support in the builtin template and themes, plus touch and swipe event support for navigation.</p>
</div>
<hr>
<div>
	<h1>Engineered</h1>
	<h2>MVC, OOCSS, and AMD</h2>
	<p>Cutting edge tech, packaged for simplicity.  Use it out of the box, or drop in code for your own slide models, views, and controllers.</p>
</div>
<hr>
<div class="slide-layout-title">
	<h1>Get it</h1>
	<h2>Now available on <a href="https://github.com/briancavalier/slides">github</a></h2>
</div>
